<template>
	<view class="">
		<!-- 顶部信息 -->
		<view class="HomeTop">
			<view class="logoView">
				<!-- logo -->
				<img class="logo" src="/static/index/logo.jpg" alt="" />
			</view>
			<view class="inputView">
				<input class="textinput" style="text-align: center;" type="text" value="" placeholder="寻找商品" />
			</view>
		</view>

		<!-- 顶部导航  scroll-view -->

		<view class="tabs">
			<scroll-view id="tab-bar" class="scroll-h" scroll-x="{true}">
				<!-- uni-tab-item-title-active -->
				<!-- 
				 点击分类，跳转到列表页，
				 -->
				<view 
				class="uni-tab-item" 
				v-for="(item,index) of topCates"
				:key="item.id"
				@click="_goToList(index,item.id)"
				>
					<text class="uni-tab-item-title " :class="topCateIndex == index ? 'uni-tab-item-title-active':''">{{item.catename}}</text>
				</view>
			</scroll-view>
		</view>
		<!-- 推荐轮播图 -->
		<view class="banner-container">
			<swiper 
			:indicator-dots="true" 
			:autoplay="true" 
			:interval="2000" 
			:duration="1000"
			:circular="true"
			>
				<swiper-item v-for="(item,index ) of banners" :key="item.id">
					<view class="swiper-item">
						<image :src="item.img" mode=""></image>
					</view>
				</swiper-item>

			</swiper>
		</view>

		<!-- 功能导航开始 -->
		<!-- 功能导航 -->
		<view class="FunctNavCon">
			<view class="FunctNavLi">
				<image src="@/static/index/xiaohuoban.png" alt class="FunImg" />
				<p>限时抢购</p>
			</view>
			<view class="FunctNavLi">
				<image src="@/static/index/jifentixicopy.png" alt class="FunImg" />
				<p>积分商城</p>
			</view>
			<view class="FunctNavLi">
				<image src="@/static/index/lianxiwomen.png" alt class="FunImg" />
				<p>联系我们</p>
			</view>
			<view class="FunctNavLi">
				<image src="@/static/index/-shangpinfenlei-gai.png" alt class="FunImg" />
				<p>商品分类</p>
			</view>
		</view>

		<!-- 推荐部分 未写 -->
		<view class="HotGoods">
			<!-- 热推左侧 -->
			<view class="HotLeft">
				<view class="LimitedContent">
					<image class="LimitedImg" src="@/static/index/xianshi.jpg" alt />
					<label class="Limited">限时秒杀</label>
				</view>
				<p class="LimitedTitle">每天零点场，好货秒不停</p>
				<!-- 倒计时 -->
				<view class="LimitTimeAll">
					<label class="LimitTime">{{secKill.h}}</label>
					<view class="maohao">:</view>
					<label class="LimitTime">{{secKill.m}}</label>
					<view class="maohao">:</view>
					<label class="LimitTime">{{secKill.s}}</label>
					<label class="Seckill">秒杀</label>
				</view>
				<image :src="secKillInfo.img" class="LimitedgoodsImg" alt="">
			</view>

			<!-- 热推右侧 -->
			<view class="HotRight">
				<!-- 右侧顶部部分 -->
				<view class="HotTop">
					<view class="HomeTopInfo">
						<view class="HomeTopInfoOne">
							<label class="BrandNew">品牌上新</label>
							<label class="Discount">折</label>
						</view>
						<view class="HomeTopRobbig">
							<label>每日九点，抢大牌</label>
						</view>
					</view>
					<!-- <div> -->
					<view class="Cloth">
						<image src="@/static/index/goods1.jpg" alt="">
					</view>

					<!-- </div> -->
				</view>
				<!-- 右侧底部 -->
				<view class="HotBottom">
					<view class="HotBottomLeft">
						<view class="HotBottomLeftInfo">
							<label class="HotBottomLeftInfoTitle">每日十件</label>
							<label class="HotBottomLeftInfoDetail">只为你选好货</label>
						</view>
						<view class="HotBottomLeftImage">
							<image src="@/static/index/goods1.jpg" mode=""></image>
						</view>
					</view>
					<view class="HotBottomRight">
						<view class="HotBottomRightInfo">
							<label class="HotBottomRightInfoTitle">每日十件</label>
							<label class="HotBottomRightInfoDetail">只为你选好货</label>
						</view>
						<view class="HotBottomRightImage">
							<image src="@/static/index/goods1.jpg" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 轮播图2 -->
		<div class="Swiper2">
			<image class="Swiper2Img" src="@/static/index/swiper.jpg" alt />
		</div>

		<!-- 底部商品列表 -->
		<view class="products">
			<!-- 商品标签 -->
			<view class="tags">
				<view class="tag_list " :class="indexGoodsFlag==0?'active_tag_list':''" @click="_switchIndexGoods(0)">
					<label for="">热门推荐</label>
				</view>
				<view class="tag_list"  :class="indexGoodsFlag==1?'active_tag_list':''" @click="_switchIndexGoods(1)">
					<label for="">最新好货</label>
				</view>
				<view class="tag_list" :class="indexGoodsFlag==2?'active_tag_list':''" @click="_switchIndexGoods(2)">
					<label for="">所有商品</label>
				</view>
			</view>
			<!-- 标签对应的商品 -->
			<view class="tags_product">
				
				<block v-if="indexAllGoods.length>0">
					<view 
					class="product" 
					v-for="(item,index) of indexAllGoods[indexGoodsFlag].content" 
					:key="item.id"
					@click="_goToDetail(item.id)"
					>
						<view class="GoodsLeft">
							<image class="GoodsImg" :src="item.img" alt />
						</view>
						<view class="GoodsCont">
							<view class="GoodConTit">{{item.goodsname}}</view>
							<view class="GoodsPrice">￥{{item.price}}</view>
							<view class="yimai">已售50件</view>
							<view class="Immed">立即抢购</view>
						</view>
					</view>
				</block>
				
				
			</view>
		</view>
	</view>
</template>

<script>
	
	import Http from '@/utils/http.js'
	
	import { apiurl } from '@/utils/config.js'
	
	export default {
		
		data() {
			return {
				topCates:[],//顶部导航栏 数据（一级分类）
				topCateIndex:0,//控制顶部选中的索引
				banners:[],//顶部轮播图
				secKillInfo :{},//秒杀数据信息
				secKill:{},//倒计时变量
				timer:null,//清除定时器变量
				//indexGoodsData:[],//首页热门推荐、最新好货、所有商品
				indexGoodsFlag:0,//默认热门推荐
				indexAllGoods:[],//所有商品
			}
		},
		mounted(){
			this._getTopCates()
			this._getBanners()
			this._getIndexGoods()
			
		},
		onShow(){
			this._getSecKillInfo()
			
			this._isLogin()
		},
		
		onHide(){
			console.log('页面销毁')
			clearInterval(this.timer)
		},
		methods: {
			
			_goToDetail(id){
				uni.navigateTo({
					url:'../details/details?id='+id
				})
			},
			//判断是否登录
			_isLogin(){
				let loginstatus = uni.getStorageSync('loginstatus')
				if(loginstatus){
					uni.setTabBarItem({
						index:2,
						text:'已登录'
					})
				}else{
					uni.setTabBarItem({
						index:2,
						text:'未登录'
					})
				}
			},
			
			//首页热门推荐、最新好货、所有商品
			_switchIndexGoods(index){
				//console.log(index)
				this.indexGoodsFlag = index
				//this._getIndexGoods()
			},
			//获取首页热门推荐、最新好货、所有商品
			async _getIndexGoods(){
				let result = await Http({
					url:'/api/getindexgoods'
				})
				//console.log( result,'1111' )
				result.data.list.forEach(item1=>{
					// console.log(item1)
					item1.content.forEach(item2=>{
						// console.log(item2)
						item2.img = apiurl + item2.img
					})
				})
				this.indexAllGoods =  result.data.list
				//console.log(this.indexAllGoods,'所有的')
				//this.indexGoodsData = result.data.list[this.indexGoodsFlag].content
			},
			
			//获取秒杀信息
			async _getSecKillInfo(){
				let result = await Http({
					url:'/api/getseckill'
				})
				//console.log( result )
				this.secKillInfo = result.data.list[0]
				this.secKillInfo.img = apiurl + this.secKillInfo.img
				this._setSecKill( this.secKillInfo.endtime )
			},
			//设置秒杀活动倒计时
			_setSecKill( endtime ){
				//console.log( endtime ) //毫秒
				// (endtime - currentTime) / 1000 剩余时间
				// var timer = null
				clearInterval(this.timer)
				
				this.timer = setInterval(()=>{
					let d,h,m,s //d ：天  h:小时 m:分钟  s：秒
					let t = parseInt( ( endtime - new Date().getTime() ) /1000 )//剩余时间
					// console.log(t)
					//console.log(1)
					if(t <= 0){
						clearInterval(timer)
						this.secKill = {d:'00',h:'00',m:'00',s:'00' }
					}
					
					
					d = parseInt(t/86400)    // 1*24*60*60
					h = parseInt(t%86400/3600)   //1小时 * 60 * 60
					m = parseInt(t%3600/60) //1小时
					s = t%60//秒
					h = h > 9 ? ''+h : '0'+h
					m = m > 9 ? ''+m : '0'+m
					s = s > 9 ? ''+s : '0'+s,
					//console.log( d,h,m,s )
					this.secKill = {d:d,h:h,m:m,s:s }
				},1000)
				
			},
			
			//获取轮播图
			async _getBanners(){
				let result = await Http({
					//url:'http://localhost:3000/api/getbanner'
					url:'/api/getbanner'
				})
				//console.log( result )
				result.data.list.forEach(item=>{
					//console.log(item,apiurl)
					item.img = apiurl + item.img
				})
				this.banners = result.data.list
				//console.log(this.banners)
			},
			//跳转到列表页
			_goToList( index,fid ){
				//console.log(fid)
				this.topCateIndex = index
				uni.navigateTo({
					url:"../product/product?fid=" + fid
				})
			},
			//获取一级分类信息
			async _getTopCates(){
					
					// http://localhost:3000/api/getcate
					let result = await Http({
						//url:'http://localhost:3000/api/getcate',
						url:'/api/getcate',
					})
					//console.log( result )
					this.topCates = result.data.list
					
			}
		}
	}
</script>

<style>
	/* 导入外部的样式文件 */
	@import url("../../common/css/index.css");
</style>